import React, {useState} from 'react';
import 'antd/dist/antd.css';
import {
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  Switch,
  Cascader,
  Radio,
  InputNumber,
  Modal,
} from 'antd';

const standardList = [
  {
    value: '辣度',
    label: '辣度',
    children: [
      {
        value: '微辣',
        label: '微辣',
      },
    ],
  },
];

const originList = [
  {
    value: 'sichuan',
    label: 'Sichuan',
    children: [
      {
        value: 'chengdu',
        label: 'Chengdu',
      },
    ],
  },
];

const WeightForm = () => {
  const [unitVisable, setUnitVisable] = useState(true)
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Success:', values);
    Modal.info({
      title: '表单信息',
      content: (
        <div>
          <p>名称：{values.name}</p>
          <p>售价：{values.salePrice}</p>
          <p>成本价：{values.costPrice}</p>
          <p>单位：{values.unit}</p>
          <p>规格：{values.standard}</p>
          <p>生产地：{values.origin}</p>
          {/* <p>生产日期：{values.date}</p> */}
          <p>打包个数：{values.count}</p>
          <p>是否优惠：{values.discount}</p>
        </div>
      ),
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      onValuesChange={(change, all) => {
        if(change && change.weight === '0') {
          setUnitVisable(false);
          form.resetFields(['unit']);
        } else {
          setUnitVisable(true);
        }
      }}
    >
      <Form.Item label="商品类型" name="weight">
        <Radio.Group>
          <Radio.Button value="1">称重</Radio.Button>
          <Radio.Button value="0">非称重</Radio.Button>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        label="名称"
        name="name"
        rules={[
          { required: true, message: '请输入商品名称' },
          { max: 10, min: 1, message: '长度为1-10' },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="售卖价格"
        name="salePrice"
        dependencies={['costPrice']}
        rules={[
          { required: true, message: '请输入商品售价' },
          { type: 'number', max: 99, min: 1, message: '大小为1-99' },
        ]}
      >
        <InputNumber controls={false} />
      </Form.Item>
      <Form.Item
        label="成本价格"
        name="costPrice"
        dependencies={['salePrice']}
        rules={[
          { required: true, message: '请输入商品成本价' },
          { type: 'number', max: 99, min: 1, message: '大小为1-99' },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('salePrice') >= value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('成本价应小于售价'));
            },
          }),
        ]}
      >
        <InputNumber controls={false} />
      </Form.Item>
      { unitVisable ? (
        <Form.Item label="单位" name="unit">
        <Select allowClear>
          <Select.Option value="克">克</Select.Option>
          <Select.Option value="份">份</Select.Option>
        </Select>
      </Form.Item>
      ) : null}

      <Form.Item label="多级规格" name="standard">
        <Cascader
          options={standardList}
        />
      </Form.Item>
      <Form.Item label="生产地" name="origin">
        <Cascader
          options={originList}
        />
      </Form.Item>
      <Form.Item label="生产日期" name="date">
        <DatePicker />
      </Form.Item>
      <Form.Item label="打包个数" name="count">
        <Input />
      </Form.Item>
      <Form.Item label="参与优惠" name="discount" valuePropName="checked">
        <Switch />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          提交信息
        </Button>
      </Form.Item>
    </Form>
  );
};

export default WeightForm;